<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { authApi, type User } from '../../services/api'
// import Typewriter from '../../components/Typewriter.vue'

// 页面数据
const title = ref('欢迎来到虚拟Emoji角色系统')
const description = ref('在这里你可以创建属于自己的Emoji角色，并与它互动、记录日记，构建你的虚拟世界。')

// const typewriterWords = ref(['"Hello."', '"World."', '"I am Rachel."', '"Welcome."'])

const router = useRouter()
const isAuthenticated = ref(false)
const user = ref<User | null>(null)

// 检查用户是否已认证
const checkAuthStatus = async () => {
  try {
    // 尝试获取用户信息来验证是否已登录
    user.value = await authApi.getProfile()
    isAuthenticated.value = true
  } catch (error) {
    isAuthenticated.value = false
    user.value = null
  }
}

// 注册方法
const goToRegister = () => {
  router.push('/register')
}

// 登录方法
const goToLogin = () => {
  router.push('/login')
}

onMounted(() => {
  checkAuthStatus()
})
</script>

<template>
  <div class="home-container">
    <header>
      <!-- <div class="typewriter-container">
        <Typewriter :words="['&quot;Hello.&quot;', '&quot;World.&quot;', '&quot;I am Rachel.&quot;', '&quot;Welcome.&quot;']" :period="2000" />
      </div> -->
      <h1>{{ title }}</h1>
      <p class="description">{{ description }}</p>
    </header>

    <main>
      <!-- 未认证用户界面 -->
      <div v-if="!isAuthenticated" class="auth-prompt neo-brutalist">
        <h2>开始您的虚拟角色之旅</h2>
        <p>请先注册或登录以体验完整功能</p>
        <div class="auth-buttons">
          <button class="neo-brutalist btn btn--primary" @click="goToRegister">用户注册</button>
          <button class="neo-brutalist btn btn--secondary" @click="goToLogin">用户登录</button>
        </div>
      </div>

      <!-- 已认证用户界面 -->
      <div v-else class="welcome-message neo-brutalist">
        <h2>欢迎回来, {{ user?.username }}!</h2>
        <p>请使用上方导航栏访问各个功能页面</p>
      </div>
    </main>
  </div>
</template>

<style scoped>
.home-container {
  padding: 2rem;
  width: 100%;
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
}

.typewriter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  margin-bottom: 2rem;
}

header {
  text-align: center;
  margin-bottom: 3rem;
}

header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #000;
}

header .description {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.auth-prompt {
  text-align: center;
  padding: 2rem;
  margin: 0 auto;
  max-width: 600px;
  background-color: var(--neo-brutalist-white);
}

.auth-prompt h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #000;
}

.auth-prompt p {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.auth-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

button.neo-brutalist.btn {
  border: 4px solid var(--neo-brutalist-black);
  box-shadow: 4px 4px 0 var(--neo-brutalist-black);
  transition: all 0.2s ease;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
}

button.neo-brutalist.btn:hover {
  box-shadow: 2px 2px 0 var(--neo-brutalist-black);
  transform: translate(2px, 2px);
}

.welcome-message {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: var(--neo-brutalist-white);
}

.welcome-message h2 {
  font-size: 2rem;
  color: #000;
  margin-bottom: 0.5rem;
}

.welcome-message p {
  font-size: 1.2rem;
  color: #666;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background-color: var(--neo-brutalist-white);
  transition: all 0.2s ease;
}

.feature-card:hover {
  box-shadow: 6px 6px 0 var(--neo-brutalist-black);
  transform: translate(2px, 2px);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000;
}

.feature-card p {
  font-size: 1rem;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 1rem;
  }
  
  header h1 {
    font-size: 2rem;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .auth-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  button.neo-brutalist.btn {
    width: 100%;
    max-width: 250px;
  }
}
</style>